<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1. */
      .button {
        position: relative;
        background: #7983ff;
        padding: 0.5rem 1rem;
        font-size: 1.2rem;
        border: none;
        color: white;
        cursor: pointer;
        outline: none;
        overflow: hidden;
      }

      .button span {
        position: relative;
      }

      .button:before {
        --size: 0;
        content: "";
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background: radial-gradient(circle closest-side, pink, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
      }

      .button:hover:before {
        --size: 200px;
      }

      /* 2. */
      .animated-border-button {
        background-color: #263059;
        border: none;
        color: #ffffff;
        outline: none;
        padding: 12px 40px 10px;
        position: relative;
      }

      .animated-border-button:before,
      .animated-border-button:after {
        border: 0 solid transparent;
        transition: all 0.3s;
        content: "";
        height: 0;
        position: absolute;
        width: 24px;
      }

      .animated-border-button:before {
        border-top: 2px solid #263059;
        right: 0;
        top: -4px;
      }

      .animated-border-button:after {
        border-bottom: 2px solid #263059;
        bottom: -4px;
        left: 0;
      }

      .animated-border-button:hover:before,
      .animated-border-button:hover:after {
        width: 100%;
      }

      /* 3. */
      .button-swing {
        color: #65b5f6;
        background-color: transparent;
        border: 1px solid #65b5f6;
        border-radius: 4px;
        padding: 0 16px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
      }

      .button-swing:focus {
        animation: swing 1s ease;
        animation-iteration-count: 1;
      }

      @keyframes swing {
        15% {
          transform: translateX(5px);
        }
        30% {
          transform: translateX(-5px);
        }
        50% {
          transform: translateX(3px);
        }
        65% {
          transform: translateX(-3px);
        }
        80% {
          transform: translateX(2px);
        }
        100% {
          transform: translateX(0);
        }
      }

      /* 4. */
      .animated-fill-button {
        padding: 20px;
        background: #fff;
        color: #000;
        border: 1px solid #000;
        cursor: pointer;
        transition: 0.3s all ease-in-out;
      }

      .animated-fill-button:hover {
        background: #000;
        color: #fff;
      }

      /* 5. */
      .button-grow {
        color: #65b5f6;
        background-color: transparent;
        border: 1px solid #65b5f6;
        border-radius: 4px;
        padding: 0 16px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
      }

      .button-grow:hover {
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <h1>1.</h1>
    <button class="button">
      <span>button</span>
    </button>
    <h1>2.</h1>
    <button class="animated-border-button">Submit</button>
    <h1>3.</h1>
    <button class="button-swing">Submit</button>
    <h1>4.</h1>
    <button class="animated-fill-button">Submit</button>
    <h1>5.</h1>
    <button class="button-grow">Submit</button>
    <script>
      // 1.
      let btn = document.querySelector(".button");
      btn.addEventListener("mousemove", (e) => {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        btn.style.setProperty("--x", x + "px");
        btn.style.setProperty("--y", y + "px");
      });
    </script>
  </body>
</html>
